<template>
  <el-dialog
    class="config-dialog"
    v-model="showDialog"
    :close-on-click-modal="true"
    :before-close="close"
    style="max-width: 600px"
    @opened="dialogOpen"
    title="账户信息"
  >
    <div class="user-info" id="user-info">
      <el-form :model="getUserInfo" label-width="150px">
        <el-form-item label="账户">
          <span>{{ getUserInfo.nickname }}</span>
        </el-form-item>
        <el-form-item label="剩余算力">
          <el-tag>{{ getUserInfo["computingPower"] }}</el-tag>
        </el-form-item>
        <el-form-item label="会员到期时间" >
          <el-tag type="danger">{{ getUserInfo["accountEndDate"].join("-") }}</el-tag>
          <!-- <el-tag type="danger">{{ dateFormat(getUserInfo["accountEndDate"].join("-")) }}</el-tag> -->
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script setup>
import { computed, onMounted, ref } from "vue";
import { httpGet } from "@/utils/http";
import { ElMessage } from "element-plus";
import { dateFormat } from "@/utils/libs";
import { getInfo } from "@/api/login";
import { storeToRefs } from "pinia";
import { useUserStore } from "@/store/user";
const userStore = useUserStore();
let { getUserInfo } = storeToRefs(userStore);
// eslint-disable-next-line no-undef
const props = defineProps({
  show: Boolean,
  user: Object,
  models: Array,
});

const showDialog = computed(() => {
  return props.show;
});

onMounted(() => {});
const dialogOpen = async (params) => {
  let info = await getInfo();
  userStore.setUser(info);
};
// eslint-disable-next-line no-undef
const emits = defineEmits(["hide"]);
const close = function () {
  emits("hide", false);
};
</script>

<style lang="stylus">
.config-dialog {
  .el-dialog {
    --el-dialog-width 90%;
    max-width 800px;

    .el-dialog__body {
      overflow-y auto;

      .user-info {
        position relative;

        .el-message {
          position: absolute;
        }
      }

      .tip {
        color #c1c1c1
        font-size 12px;
      }
    }
  }
}
</style>
